<template>
  <div>
    <div class="head" v-for="item in detail" :key="item.id">
      <img :src="base + item.pic" alt="" />
    </div>
    <div class="health">
      <div class="sx" v-for="item in detail" :key="item.id">
        <h2>{{ item.title }}</h2>
        <van-grid :icon-size="18" :border="false" style="border: none" direction="horizontal" :column-num="3">
          <van-grid-item icon="clock-o" text="20分钟" />
          <van-grid-item icon="gem-o" :text="item.classify" />
          <van-grid-item icon="fire-o" :text="`${item.use_ka}卡路里`" />
        </van-grid>
        <p>{{ item.detail }}</p>
        <div v-for="m in intro" :key="m.project_id">
          <p>{{ m.introduction }}</p>
          <span @click="$router.push(`/index/course/more/${item.pid}`)" class="more">更多</span>
        </div>
      </div>
      <!-- 音乐 -->
      <div class="music">
        <div class="music-1">
          <hr />
          <span>训练音乐</span>
          <p>Bright FUthres</p>
        </div>
        <div class="music-2">
          <span>
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <!-- 热身 -->
      <div class="warm">
        <div class="warm-1">
          <span>训练·{{ nummber }}个</span>
        </div>
        <div class="warm-2" v-for="items in train" :key="items.id">
          <div>
            <img :src="base + items.train_pic" alt="" />
          </div>
          <div class="warm-3">
            <span>{{ items.train_title }}</span>
            <p>{{ items.train_number }}s</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 课程评价 -->
    <div class="evaluate">
      <div>
        <van-cell-group>
          <img src="" alt="" />
          <van-field v-model="content" style="border: none" placeholder="请留下你的精彩评论" />
          <p @click="submit">发送</p>
        </van-cell-group>
      </div>
      <div class="evaluate-1" v-for="item in comment" :key="item.id">
        <div class="evaluate-2">
          <div class="evaluate-3">
            <img :src="item.headpic" alt="" />
            <div class="wz">
              <p>{{ item.uname }}</p>
              <p>{{ item.time }}</p>
            </div>
          </div>
          <div class="left">
            <van-icon name="like-o" />
            <span>122</span>
          </div>
        </div>
        <span class="wz-1">{{ item.content }}</span>
      </div>
      <span class="wz-2">我是有底线的</span>
    </div>
    <!-- 我是有底线的 -->

    <!-- 参加课程 -->
    <van-form>
      <div class="btn" style="margin: 12px">
        <van-button round block type="info" native-type="submit">参加课程</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import httpApi from "@/http";
import { base } from "@/service/index";
import moment from "moment";
import { Toast } from 'vant';


export default {
  data() {
    return {
      base,
      id: this.$route.params.id,
      checked: true,
      detail: "",
      train: "",
      nummber: "",
      content: "",
      comment: "",
      intro: "",
    };
  },
  mounted() {
    window.scrollTo(0, 0);
    this.commentById();
    this.courseIntroduction();
    this.courseTrainByCourseId();
    this.courseDetailById();
  },
  methods: {

    // 新增评论
    submit() {
      if(this.content){
        let time = new Date().getTime();
        httpApi.commentApi
          .commentAddCourse({
            uid: this.id,
            content: this.content,
            time,
            pid: this.id,
          })
          .then((res) => {
            console.log("新增", res);
            if (res.data.code == 200) {
              this.comment = ''
              this.commentById()
            } else {
              console.log("新增失败");
            }
          });
      }else{
        Toast('消息不能为空')
      }
    },

    // 查询评论
    commentById() {
      httpApi.commentApi.commentByCourseId({ pid: this.id }).then((res) => {
        console.log("评论", res);
        this.comment = res.data.data;
        if (this.comment) {
          this.comment.reverse()
          this.comment.forEach((el) => {
            el.time = moment(parseInt(el.time)).format("YYYY-MM-DD HH:mm");
          });
        }
      });
    },

    courseIntroduction() {
      httpApi.courseApi.courseIntroduction({ pid: this.id }).then((res) => {
        console.log(res);
        this.intro = res.data.data;
      });
    },

    // 课程详情
    courseDetailById() {
      httpApi.courseApi.courseDetailById({ pid: this.id }).then((res) => {
        console.log("详情", res);
        this.detail = res.data.data;
      });
    },
    courseTrainByCourseId() {
      httpApi.courseApi.courseTrainByCourseId({ pid: this.id }).then((res) => {
        console.log("训练", res);
        this.train = res.data.data;
        this.nummber = this.train.length;
        console.log("数量", this.nummber);
      });
    },
    onInput(checked) {
      Dialog.confirm({
        title: "提醒",
        message: "是否切换开关？",
      }).then(() => {
        this.checked = checked;
      });
    },
  },
};
</script>

<style scoped>
.head img {
  width: 100%;
  object-fit: cover;
}

.health {
  display: inline-block;
  width: 100%;
  background-color: #fff;
  margin-top: -30px;
  border-radius: 20px;
}

.health .sx h2 {
  margin-top: 30px;
  margin-left: 20px;
}

.health .sx span {
  font-weight: 800;
  margin-left: 20px;
  padding-left: 10px;
  border: none;
}

.health .sx p {
  font-size: 14px;
  color: #666;
  margin: 10px 20px 0 20px;
  /* //对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* //溢出隐藏 */
  overflow: hidden;
  /* //设置伸缩盒子对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  /* //设置 块元素包含的文本行数 */
  -webkit-line-clamp: 2;
}

.health .sx .more {
  display: inline-block;
  /* width: 100%; */
  font-size: 14px;
  color: #666;
  margin-left: 85%;
}

hr {
  width: 90%;
}

.music {
  margin-top: 25px;
  margin-left: 20px;
  position: relative;
}

.music .music-1 span {
  display: inline-block;
  margin-top: 30px;
}

.music .music-1 p {
  margin-top: 20px;
}

.music .music-2 span {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: rgb(242, 242, 242);
  position: absolute;
  right: 20px;
  top: 50%;
}

.music .music-2 span .van-icon {
  position: absolute;
  right: 3px;
  top: 3px;
}

.warm {
  margin-left: 20px;
  margin-top: 30px;
}

.warm .warm-1 {
  margin-top: 25px;
  position: relative;
}

.warm span {
  font-size: 22px;
  font-weight: 100;
}

.warm .warm-2 {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.warm .warm-2 .warm-3 {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 20px;
}

.warm .warm-2 img {
  border-radius: 5px;
  widows: 100px;
  height: 100px;
}

.warm .warm-2 .warm-3 span {
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}

.warm .warm-2 .warm-3 p {
  display: inline-block;
  color: #ddd;
}

.evaluate {
  margin-bottom: 150px;
}

.evaluate [class*="van-hairline"]::after {
  border: none;
}

.evaluate img {
  margin-top: 20px;
  margin-left: 20px;
}

.evaluate .van-field__control {
  line-height: 5px;
}

.evaluate .van-cell {
  display: inline-block;
  border-radius: 30px;
  background-color: aqua;
  width: 75%;
  height: 35px;
  margin-left: 10px;
  background-color: rgb(248, 248, 248);
}

.evaluate .van-cell-group p {
  display: inline-block;
  color: blue;
  margin-left: 10px;
  position: relative;
  bottom: 10px;
  font-size: 14px;
}

.evaluate .evaluate-2,
.evaluate-3 {
  display: flex;
  align-items: center;
}

.evaluate .evaluate-2 {
  justify-content: space-between;

  margin: 20px 20px 5px 0;
}

.evaluate .evaluate-2 img {
  margin-top: 15px;
  margin-bottom: 10px;
}

.evaluate .evaluate-2 .wz {
  margin-top: 10px;
  margin-left: 10px;
}

.evaluate .evaluate-2 .left {
  display: inline-block;
  margin-left: 20px;
}

.evaluate .evaluate-2 .evaluate-3 img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.evaluate .evaluate-1 .wz-1 {
  margin-left: 60px;
  margin-bottom: 30px;
  font-size: 14px;
}

.evaluate .wz-2 {
  display: inline-block;
  font-size: 12px;
  color: #666;
  margin-left: 35%;
  padding-top: 50px;
}

.evaluate .evaluate-2 p {
  font-size: 14px;
  color: #666;
}

.btn {
  position: fixed;
  bottom: -10px;
  left: 10px;
  right: 10px;
  margin-top: 20px;
}

.btn .van-button {
  border-radius: 10px;
  background-color: rgb(98, 73, 227);
}</style>
